<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
		  <div id="progress-bar" title="你好" style="width:100%;height:20px;background:#ccc;position:relative;">
		    <div id="learned" style="width:0%;height:20px;background:#F00;position:absolute;"></div>
		  </div>
		  <div id="tip"></div>
		</div>
		
		<script>
		  var video1 = {
		    totalTime: 150,
		    learnedTime: [0, 10, 20, 30, 50, 70]
		  };
		
		  var video2 = {
		    totalTime: 200,
		    learnedTime: [0, 30, 40, 60]
		  };
		
		  var video3 = {
		    totalTime: 300,
		    learnedTime: [0, 100, 150, 160]
		  };
		  
		  // 获取视频学习情况
		  var videos = [video1, video2, video3];
		  var totalTime = 0;
		  var learnedTime = [];
		  videos.forEach(function(video) {
		    totalTime += video.totalTime;
		    learnedTime = learnedTime.concat(video.learnedTime);
		  });
		  
		  // 生成进度条
		  var progressBar = document.getElementById('progress-bar');
		  var learnedBar = document.getElementById('learned');
		  learnedBar.style.width = (learnedTime.length / totalTime * 100) + '%';
		  var tip = document.getElementById("tip")
		  // 进度条鼠标悬停
		  progressBar.onmousemove = function(e) {
			  // console.log(e)
		    var percent = e.offsetX / progressBar.offsetWidth;
		    var time = Math.round(percent * totalTime);
		    var flag = false;
		    learnedTime.forEach(function(t) {
		      if (t == time) flag = true;
		    });
		    if (flag) {
				tip.innerText= time + '秒';
		      // progressBar.title = time + '秒';
			  console.log( time + '秒')
		    } else {
		      progressBar.title = '';
		    }
		  }
		</script>
	</body>
</html>